import React from 'react';
import { Select, Tag } from 'antd';
import { Platform } from '../../../types/hotRadar';
import { platformConfig, platformOptions } from '../../../constants/platforms';
import './style.css';

const { Option } = Select;

interface PlatformFilterProps {
  value?: Platform[];
  onChange?: (value: Platform[]) => void;
}

export const PlatformFilter: React.FC<PlatformFilterProps> = ({
  value = [],
  onChange,
}) => {
  const handleChange = (selectedValues: string[]) => {
    onChange?.(selectedValues as Platform[]);
  };

  const tagRender = (props: any) => {
    const { label, value, closable, onClose } = props;
    const config = platformConfig[value as Platform];
    
    return (
      <Tag
        color={config?.color}
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 3 }}
      >
        {config?.icon} {label}
      </Tag>
    );
  };

  return (
    <div className="platform-filter">
      <label className="filter-label">平台筛选：</label>
      <Select
        mode="multiple"
        placeholder="选择平台（可多选）"
        value={value}
        onChange={handleChange}
        className="platform-select"
        allowClear
        maxTagCount="responsive"
        tagRender={tagRender}
        optionFilterProp="children"
        filterOption={(input, option) =>
          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
        }
      >
        {platformOptions.map((option) => (
          <Option key={option.value} value={option.value} label={option.label}>
            <div className="platform-option">
              <span className="platform-option-icon">
                {platformConfig[option.value as Platform]?.icon}
              </span>
              <span className="platform-option-label">{option.label}</span>
              <span className="platform-option-desc">{option.description}</span>
            </div>
          </Option>
        ))}
      </Select>
    </div>
  );
};